<template>
	<div class="wrapper upload">
		<v-head :colorType="1"></v-head>
		<div class="content">
			<div class="box">
				<div class="box-item">
					<div class="box-left">标题</div>
					<el-input v-model="inputTitle" placeholder="请输入标题" maxlength="60" show-word-limit clearable />
				</div>
				<div class="box-item">
					<div class="box-left">作者</div>
					<el-input v-model="inputName" placeholder="请输入作者" maxlength="15" show-word-limit clearable />
				</div>
				<!-- <div class="box-item">
					<div class="box-left">检测类型</div>
					<el-input v-model="inputType" placeholder="请输入类型" maxlength="15" show-word-limit clearable />
				</div> -->
				<div class="box-item">
					<div class="box-left">内容</div>
					<el-radio-group v-model="radio">
						<!-- <el-radio label="1" size="large">粘贴文本</el-radio> -->
						<el-radio label="1" size="large">上传文档</el-radio>
						<el-radio label="2" size="large">文档对比</el-radio>
					</el-radio-group>
				</div>
				<div>
					<!-- <div v-if="radio == '1'">
						<el-input
							v-model="textarea"
							:rows="2"
							type="textarea"
							placeholder="请输入或者粘贴文本"
							maxlength="2000"
							show-word-limit
							:autosize="{ minRows: 10 }"
						/>
					</div> -->
					<div v-if="radio == '1'" class="radio-upload">
						<el-upload
							ref="uploadRef"
							class="upload-demo upload-demo-left"
							drag
							action="/"
							v-model="upfileObj"
							:before-upload="beforeAvatarUploads"
							:on-progress="onProgress"
							:on-success="onSuccess"
							:on-error="onError"
							:on-remove="onRemove"
							multiple
							:http-request="upfile"
							:on-change="handleChangePic"
						>
							<el-icon class="el-icon--upload">
								<el-icon :size="65" color="#2972fa"> <CirclePlusFilled /> </el-icon
							></el-icon>
							<div class="f16">点击或者拖动文件到虚线框内上传</div>
							<div class="f12" style="color: #999">目前只支持doc、docx、pdf、txt后缀的文件</div>
						</el-upload>
						<div v-if="percentage > 1" class="progress">
							<el-progress :percentage="percentage" intermediate :show-text="false" />
						</div>
					</div>
					<div v-else-if="radio == '2'" class="contrast">
						<div class="contrast-upload">
							<el-tag>文件一</el-tag><span style="color: red">*</span>
							<el-upload
								ref="uploadRef"
								class="upload-demo"
								drag
								action="/"
								v-model="upfileA"
								:before-upload="beforeAvatarUploads"
								:on-progress="onProgressContrastA"
								:on-success="onSuccessContrastA"
								:on-error="onErrorContrastA"
								:on-remove="onRemoveContrastA"
								multiple
								:http-request="upfileContrastA"
								:on-change="handleChangePicContrastA"
							>
								<!-- <el-icon class="el-icon--upload"
									><el-icon :size="size" color="#2972fa"> <CirclePlusFilled /> </el-icon
								></el-icon> -->
								<div class="f14" style="color: #999">点击或者拖动文件到虚线框内上传</div>
							</el-upload>
							<div v-if="percentage > 1">
								<el-progress :percentage="percentage" intermediate :show-text="false" />
							</div>
							<div class="tool" v-if="rules">请上传文件</div>
						</div>
						<div class="contrast-upload">
							<el-tag>文件二</el-tag>
							<el-upload
								ref="uploadRef"
								class="upload-demo"
								drag
								action="/"
								v-model="upfileB"
								:before-upload="beforeAvatarUploads"
								:on-progress="onProgressContrastB"
								:on-success="onSuccessContrastB"
								:on-error="onErrorContrastB"
								:on-remove="onRemoveContrastB"
								multiple
								:http-request="upfileContrastB"
								:on-change="handleChangePicContrastB"
							>
								<!-- <el-icon class="el-icon--upload"
									><el-icon :size="size" color="#2972fa"> <CirclePlusFilled /> </el-icon
								></el-icon> -->
								<div class="f14" style="color: #999">点击或者拖动文件到虚线框内上传</div>
							</el-upload>
							<div v-if="percentageB > 1">
								<el-progress :percentage="percentageB" intermediate :show-text="false" />
							</div>
						</div>
					</div>
				</div>
				<!-- <div class="box-check">
					<el-checkbox v-model="checked1" />
					<div class="box-check-label">自建库 <span style="color: #999">(什么是自建库)</span></div>
				</div> -->
				<!-- <div style="margin-top: 20px">
					<el-button round :icon="Tools" @click="tools">设置</el-button>
				</div> -->
				<div class="button-sub">
					<el-button type="primary" class="sunButton" :disabled="ifButton" @click="sunMit">
						提交查重
					</el-button>
				</div>
			</div>
		</div>
		<v-myfoot></v-myfoot>
	</div>
	<!-- <el-dialog
		class="cheng-dialog"
		v-model="dialogVisible"
		:show-close="false"
		:close-on-click-modal="false"
		destroy-on-close
	>
		<template #header="{ close, titleId, titleClass }">
			<div class="dialog-header center btheme cfff">
				<div class="flex f16">文本设置</div>
				<el-icon class="pointer" size="20" color="#fff" @click="clone">
					<Close />
				</el-icon>
			</div>
		</template>
		<div class="loading-h">
			<div class="loading-weight">
				<div class="weight-text">权重</div>
				<el-slider v-model="weight" />
			</div>
			<div class="loading-weight">
				<div class="weight-text">上下文间距</div>
				<el-slider v-model="spacing" :max="100" :min="5" />
			</div>
			<div class="loading-weight">
				<div class="weight-text">最大连续数</div>
				<el-slider v-model="maxNumberContiguous" />
			</div>
			<div class="loading-weight">
				<div class="weight-text">读取数据长度</div>
				<el-slider v-model="readDataLength" />
			</div>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="clone">取消</el-button>
				<el-button type="primary" @click="submitForms()"> 确定 </el-button>
			</div>
		</template>
	</el-dialog> -->
	<el-dialog v-model="dialogVis" title="提示" class="dialog" :before-close="handleClose">
		<div class="dialogVisible">
			<div class="dialogVisible-img">
				<img src="@/assets/image/zhuTi/chengGong.png" alt="" />
			</div>
			<div>
				<div class="dialogVisible-title">提交成功</div>
				<div>
					{{ dialogTime }}秒后页面自动跳转
					<span style="color: #2971ff; cursor: pointer; padding-left: 10px" @click="handleClose">
						立即跳转
					</span>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script setup>
import { CirclePlusFilled } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"

const router = useRouter()

const inputTitle = ref("")
const inputName = ref("")
const radio = ref("1")
const upfileObj = ref({})
const upfileA = ref({})
const upfileB = ref({})

const uploadRef = ref()
//校验
const beforeAvatarUploads = file => {
	const extname = file.name.split(".").pop()

	if (["doc", "docx", "pdf", "txt"].includes(extname)) {
		return true
	}
	ElMessage.error("请上传支持的文件")
	return false
}
const onProgress = () => {
	ifButton.value = true
	timer = setInterval(() => {
		if (percentage.value == 0) {
			clearInterval(timer)
			return
		}
		percentage.value += (Math.random() * (100 - percentage.value)) / 10
	}, 400)
}
const onSuccess = () => {
	ifButton.value = false
	clearInterval(timer)
	percentage.value = 0
	if (inputTitle.value == "") {
		inputTitle.value = upfileObj.value.name.substring(0, upfileObj.value.name.lastIndexOf("."))
	}
}
const onError = () => {
	ifButton.value = false
	clearInterval(timer)
	percentage.value = 0
}
const onRemove = () => {
	ifButton.value = false
	clearInterval(timer)
	percentage.value = 0
}
//上传文档
const upfile = async params => {
	params.onProgress(onSuccess)
	params.onProgress(onProgress)
	params.onProgress(onError)
	percentage.value = 1
	const file = params.file
	const formData = new FormData()
	formData.append("upfile", file)
	const res = await postAxios("/system/oss/upload", formData)
	upfileObj.value = res
}
const handleChangePic = (_files, filesList) => {
	if (filesList.length > 1) {
		percentage.value = 1
		filesList.splice(0, 1)
	}
}

// 进度条
const percentage = ref(1)
const percentageB = ref(1)

//效验
const rules = ref(false)
const ifButton = ref(false)

const textarea = ref("")
const inputType = ref("")

const dialogVis = ref(false)
const dialogTime = ref(3)
let timeSet

const handleClose = () => {
	clearInterval(timeSet.value)
	router.push(`/personDuplicate?type=${radio.value}`)
}

const sunMit = async () => {
	let obj = {}
	obj.author = inputName.value
	obj.type = inputType.value
	obj.status = 1
	obj.weight = weight.value
	obj.uploadType = +radio.value
	if (radio.value == "1") {
		if (inputTitle.value == "") {
			if (upfileObj.value.name == undefined) {
				return ElMessage.error("请上传文件")
			}
			const text = upfileObj.value.name.substring(0, upfileObj.value.name.lastIndexOf("."))
			inputTitle.value = text
		}
		obj.uploadPath = upfileObj.value
		obj.beanName = "duplicate"
	} else {
		if (inputTitle.value == "") {
			if (upfileA.value.name == undefined) {
				rules.value = true
				return ElMessage.error("请上传文件")
			}
			const text = upfileA.value.name.substring(0, upfileA.value.name.lastIndexOf("."))
			inputTitle.value = text
		}
		obj.uploadPath = upfileA.value
		obj.contrastPath = upfileB.value
		obj.beanName = "fileComparison"
		if (upfileA.value.md5 == upfileB.value.md5) {
			return ElMessage.error("请上传两个不同的文件")
		}
	}
	obj.title = inputTitle.value
	// obj.contextLength = spacing.value
	obj.maxNumberContiguous = maxNumberContiguous.value
	obj.readDataLength = readDataLength.value
	try {
		await postAxios(`/check/kbDuplicateCheck/save`, obj)
		dialogVis.value = true
		timeSet = setInterval(() => {
			dialogTime.value = dialogTime.value - 1
			if (dialogTime.value == 0) {
				router.push(`/personDuplicate?type=${radio.value}`)
				clearInterval(timeSet)
			}
		}, 1000)
		empty()
	} catch (error) {
		ElMessage.error(error)
	}
}
function empty() {
	inputTitle.value = ""
	inputName.value = ""
	textarea.value = ""
	inputType.value = ""
	weight.value = 1
	// spacing.value = 10
	maxNumberContiguous.value = 1
	readDataLength.value = 1
	upfileObj.value = {}
	upfileA.value = {}
	upfileB.value = {}
	uploadRef.value.clearFiles()
}

let timer
let timerB
const weight = ref(1)
const maxNumberContiguous = ref(1)
const readDataLength = ref(1)
const upfileContrastA = async params => {
	params.onProgress(onSuccessContrastA)
	params.onProgress(onProgressContrastA)
	params.onProgress(onErrorContrastA)
	percentage.value = 1
	const file = params.file
	const formData = new FormData()
	formData.append("upfile", file)
	const res = await postAxios("/system/oss/upload", formData)
	upfileA.value = res
}
const handleChangePicContrastA = (files, filesList) => {
	if (filesList.length > 1) {
		percentage.value = 1
		filesList.splice(0, 1)
	}
}
const onProgressContrastA = () => {
	ifButton.value = true
	timer = setInterval(() => {
		if (percentage.value == 0) {
			clearInterval(timer)
			return
		}
		percentage.value += (Math.random() * (100 - percentage.value)) / 10
	}, 400)
}
const onSuccessContrastA = () => {
	ifButton.value = false
	clearInterval(timer)
	percentage.value = 0
	rules.value = false
	if (inputTitle.value == "") {
		inputTitle.value = upfileA.value.name.substring(0, upfileA.value.name.lastIndexOf("."))
	}
}
const onErrorContrastA = () => {
	ifButton.value = false
	clearInterval(timer)
	percentage.value = 0
}
const onRemoveContrastA = () => {
	ifButton.value = false
	clearInterval(timer)
	percentage.value = 0
}
//右
const upfileContrastB = async params => {
	params.onProgress(onSuccessContrastB)
	params.onProgress(onProgressContrastB)
	params.onProgress(onErrorContrastB)
	percentageB.value = 1
	const file = params.file
	const formData = new FormData()
	formData.append("upfile", file)
	const res = await postAxios("/system/oss/upload", formData)
	upfileB.value = res
}
const handleChangePicContrastB = (files, filesList) => {
	if (filesList.length > 1) {
		percentageB.value = 1
		filesList.splice(0, 1)
	}
}
const onProgressContrastB = () => {
	ifButton.value = true
	timerB = setInterval(() => {
		if (percentageB.value == 0) {
			clearInterval(timerB)
			return
		}
		percentageB.value += (Math.random() * (100 - percentageB.value)) / 10
	}, 400)
}
const onSuccessContrastB = () => {
	ifButton.value = false
	clearInterval(timerB)
	percentageB.value = 0
	// if (inputTitle.value == "") {
	// 	inputTitle.value = upfileA.value.name.substring(0, upfileA.value.name.lastIndexOf("."))
	// }
}
const onErrorContrastB = () => {
	ifButton.value = false
	clearInterval(timerB)
	percentageB.value = 0
}
const onRemoveContrastB = () => {
	ifButton.value = false
	clearInterval(timerB)
	percentageB.value = 0
}
</script>

<style lang="scss" scoped>
@import "/style/basis";
.upload {
	.content {
		background-color: #fcfcfc;
		width: 100%;
		height: 80vh;
		padding: 0 20vw;
		overflow-y: scroll;
		@include maxWidth(1400) {
			padding: 0;
		}
		.box {
			position: relative;
			height: 100%;
			margin: 20px;
			padding: 30px;
			background-color: #fff;
			.progress {
				padding-left: 80px;
				padding-right: 115px;
			}
			.box-item {
				display: flex;
				margin-bottom: 20px;
				.box-left {
					width: 80px;
					display: flex;
					align-items: center;
				}
			}
			.box-check {
				display: flex;
				align-items: center;
				margin-top: 10px;
				.box-check-label {
					margin-left: 10px;
				}
			}
			.button-sub {
				// position: absolute;
				// bottom: 50px;
				// left: 50%;
				margin-left: 80px;
				// display: flex;
				// justify-content: center;
				.sunButton {
					margin-top: 30px;
					// width: 150px;
					// height: 40px;
					// border-radius: 50px;
					// color: #fff;
					// font-size: 16px;
					// @include maxWidth(768) {
					// 	width: 300px;
					// 	font-size: 14px;
					// }
					// @include maxWidth(500) {
					// 	width: 200px;
					// }
				}
			}

			.upload-file {
				display: flex;
				justify-content: space-between;
				.upload-file-x {
					cursor: pointer;
				}
			}
			.upload-demo {
				width: 80%;

				:deep(.el-progress-bar) {
					display: none;
				}
				:deep(.el-progress-bar__outer) {
					display: none;
				}
				:deep(.el-progress__text) {
					display: none;
				}
			}
			.upload-demo-left {
				margin-left: 80px;
			}
		}
	}
}
:deep(.cheng-dialog) {
	// width: 700px !important;
}
.dialogVisible {
	display: flex;
	padding-left: 50px;
	.dialogVisible-img {
		width: 80px;
		height: 80px;
		margin-right: 30px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.dialogVisible-title {
		font-size: 20px;
		color: #1296db;
		padding-bottom: 20px;
	}
}
.loading-h {
	height: 200px;
	.loading-weight {
		display: flex;
		padding: 0 20px;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}
		.weight-text {
			width: 120px;
		}
		:deep(.el-slider) {
			width: 60%;
		}
		:deep(.el-slider__bar) {
			background: linear-gradient(to right, #add8e6, #2972fa);
		}
		:deep(.el-slider__button) {
			border: 2px solid #2972fa;
		}
	}
}
.contrast {
	display: flex;
	justify-content: space-around;
	width: 100%;
	.contrast-upload {
		width: 36%;
		.upload-demo {
			margin-top: 10px;
		}
		:deep(.el-upload-dragger) {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			height: 200px;
		}
		.tool {
			font-size: 12px;
			color: #f56c6c;
		}
	}
}
</style>
